<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>


		<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
	</head>
	<body>
		<div id="app">
			国家: {{country}}
			<hr />
			<country-select :options="options" v-model:country="country"></country-select>
		</div>

		<script>
			var app = Vue.createApp({
				data() {
					return {
						options: ['中国', '美国', '日本', '韩国'],
						country: ""
					}
				}
			});

			app.component('country-select', {
				props: ['options', 'country'],
				emits: ['update:country'],
				template: `
					<div style='background-color:lightblue'>
						<h2>子组件</h2>
						选择国家:
						<input type="text" />
						<select
							:value = 'country'
							@change="$emit('update:country',$event.target.value)"
						>
							<option disabled>请选择</option>
							<option v-for="option in options" :value="o">
								{{o}}
							</option>
						</select>
					</div>
				`
			})
			var vm = app.mount("#app")
		</script>
	</body>
</html>
